/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

@import '../commons/index.css';

:root {
  /* Todo: fix in DNA, should have been zero */
  --spectrum-fieldbutton-quiet-border-size: 0;
  --spectrum-fieldbutton-disabled-border-size: 0;
  --spectrum-fieldbutton-quiet-margin: 0;
  --spectrum-fieldbutton-quiet-padding: 0;

  /* Hardcoded for wrapping study, needs to be in DNA */
  --spectrum-button-padding-y: var(--spectrum-global-dimension-size-50);
  --spectrum-button-line-height: 1.3;
}

.spectrum-BaseButton {
  /* Contain halo */
  position: relative;

  display: inline-flex;
  box-sizing: border-box;

  align-items: center;
  justify-content: center;

  /* Show the button overflow in Edge. */
  overflow: visible;

  /* Remove button the margin in Firefox and Safari. */
  margin: 0;

  border-style: solid;
  border-radius: var(--spectrum-button-border-radius);
  border-width: var(--spectrum-button-border-width);
  --spectrum-focus-ring-border-radius: var(--spectrum-button-border-radius);
  --spectrum-focus-ring-border-size: var(--spectrum-button-border-width);
  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
  --spectrum-focus-ring-size: var(--spectrum-button-primary-focus-ring-size-key-focus);

  /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  /* Font smoothing for Firefox */
  -moz-osx-font-smoothing: grayscale;

  &button {
    /* Correct the inability to style clickable types in iOS and Safari. */
    -webkit-appearance: button;
  }

  /* Adjacent buttons should be aligned correctly */
  vertical-align: top;

  transition: background var(--spectrum-global-animation-duration-100) ease-out,
              border-color var(--spectrum-global-animation-duration-100) ease-out,
              color var(--spectrum-global-animation-duration-100) ease-out,
              box-shadow var(--spectrum-global-animation-duration-100) ease-out;

  text-decoration: none;

  composes: i18nFontFamily;

  line-height: var(--spectrum-button-line-height);

  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* prevent touch scrolling on buttons */

  cursor: default;

  isolation: isolate;

  &:focus {
    outline: none;
  }
  &:focus-visible {
    z-index: 3;
  }

  /* Fix Firefox */
  &::-moz-focus-inner {
    border: 0;

    /* Remove the inner border and padding for button in Firefox. */
    border-style: none;
    padding: 0;

    /* Use uppercase PX so values don't get converted to rem */
    margin-block-start: -2PX;
    margin-block-end: -2PX;
  }

  &:disabled,
  &.is-disabled {
    cursor: default;
  }

  .spectrum-Icon {
    max-block-size: 100%;
    flex-shrink: 0;
    order: 0; /* always be before the label, regardless of DOM order */

    transition: background var(--spectrum-global-animation-duration-100) ease-out,
                fill var(--spectrum-global-animation-duration-100) ease-out;
    box-sizing: initial;
  }
}

.spectrum-Button {
  composes: spectrum-BaseButton spectrum-FocusRing;

  border-style: solid;
  --spectrum-button-border-radius: var(--spectrum-button-primary-border-radius);
  --spectrum-button-border-width: var(--spectrum-button-primary-border-size);

  min-block-size: var(--spectrum-button-primary-height);
  block-size: 0%;
  min-inline-size: var(--spectrum-button-primary-min-width);

  padding: var(--spectrum-button-padding-y) calc(var(--spectrum-button-primary-padding-x) - var(--spectrum-button-primary-border-size));

  /* @hack: fix button text vertical alignment at 14px */
  padding-block-end: calc(var(--spectrum-button-padding-y) + 1px);
  padding-block-start: calc(var(--spectrum-button-padding-y) - 1px);

  font-size: var(--spectrum-button-primary-text-size);
  font-weight: var(--spectrum-button-primary-text-font-weight);

  &:hover,
  &:active {
    box-shadow: none;
  }

  /* there should be space between the icon and text no matter the DOM order */
  .spectrum-Icon + .spectrum-Button-label {
    margin-inline-start: var(--spectrum-button-primary-text-gap);
  }

  .spectrum-Button-label + .spectrum-Icon {
    margin-inline-end: var(--spectrum-button-primary-text-gap);
  }

  &.spectrum-Button--iconOnly {
    min-inline-size: unset;
    padding: var(--spectrum-global-dimension-size-65);
  }

  .spectrum-Button-circleLoader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
  }

  &.spectrum-Button--pending {

    .spectrum-Button-label,
    .spectrum-Icon {
      opacity: 0;
    }
  }
}

a.spectrum-Button,
a.spectrum-ActionButton {
  /* Remove appearance for clickable types in iOS and Safari. */
  -webkit-appearance: none;
  /* Make link text not selectable  */
  user-select: none;
  cursor: pointer;
}

.spectrum-ActionButton {
  composes: spectrum-BaseButton spectrum-FocusRing;
  position: relative;

  block-size: var(--spectrum-actionbutton-height);
  min-inline-size: var(--spectrum-actionbutton-min-width);

  /* Use icon padding by default as it's smaller */
  padding: 0;

  --spectrum-button-border-radius: var(--spectrum-actionbutton-border-radius);
  --spectrum-button-border-width: var(--spectrum-actionbutton-border-size);

  font-size: var(--spectrum-actionbutton-text-size);
  font-weight: var(--spectrum-actionbutton-text-font-weight);

  /* icon should always have padding at the start */
  .spectrum-Icon {
    padding-inline-start: var(--spectrum-actionbutton-icon-padding-x);
  }

  /* label should always have padding at the end */
  .spectrum-ActionButton-label {
    padding-inline-end: var(--spectrum-actionbutton-text-padding-x);
  }

  /* icon + text buttons should have padding between the text and icon no matter the order */
  .spectrum-Icon + .spectrum-ActionButton-label {
    padding-inline-start: var(--spectrum-actionbutton-icon-padding-x);
  }

  .spectrum-ActionButton-label:not([hidden]) + .spectrum-Icon {
    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
  }

  /* text only buttons should have padding at the start */
  .spectrum-ActionButton-label:only-child,
  .spectrum-ActionButton-hold + .spectrum-ActionButton-label:last-child {
    padding-inline-start: var(--spectrum-actionbutton-text-padding-x);
  }

  /* icon only buttons should have padding at the end */
  .spectrum-Icon:only-child,
  .spectrum-ActionButton-hold + .spectrum-Icon:last-child {
    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
  }

  .spectrum-ActionGroup-itemIcon.spectrum-ActionGroup-itemIcon {
    padding-inline-end: 0;
  }
}

.spectrum-ActionButton-hold {
  position: absolute;
  inset-inline-end: var(--spectrum-actionbutton-hold-icon-padding-right);
  inset-block-end: var(--spectrum-actionbutton-hold-icon-padding-bottom);
}

[dir='rtl'] .spectrum-ActionButton-hold {
  transform: rotate(90deg);
}

.spectrum-ActionButton-label,
.spectrum-Button-label {
  align-self: center;
  justify-self: center;
  order: 1; /* always be after the icon, regardless of DOM order */

  /* Fixes horizontal alignment of text in anchor buttons */
  text-align: center;

  /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */
  inline-size: 100%;

  &:empty {
    display: none;
  }
}


.spectrum-ActionButton-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spectrum-ActionButton--quiet {
  border-width: var(--spectrum-actionbutton-quiet-border-size);
  border-radius: var(--spectrum-actionbutton-quiet-border-radius);

  font-size: var(--spectrum-actionbutton-quiet-text-size);
  font-weight: var(--spectrum-actionbutton-quiet-text-font-weight);
}

.spectrum-LogicButton {
  composes: spectrum-BaseButton spectrum-FocusRing;

  block-size: var(--spectrum-logicbutton-and-height);
  padding: var(--spectrum-logicbutton-and-padding-x);

  --spectrum-button-border-width: var(--spectrum-logicbutton-and-border-size);
  --spectrum-button-border-radius: var(--spectrum-logicbutton-and-border-radius);

  font-size: var(--spectrum-logicbutton-and-text-size);
  font-weight: var(--spectrum-logicbutton-and-text-font-weight);
  line-height: 0;
}

.spectrum-FieldButton {
  composes: spectrum-BaseButton spectrum-FocusRing;

  position: relative;
  block-size: var(--spectrum-dropdown-height);

  padding: 0 var(--spectrum-dropdown-padding-x);

  font-family: inherit;
  font-weight: normal;
  font-size: var(--spectrum-dropdown-text-size);
  line-height: normal;
  -webkit-font-smoothing: initial;

  cursor: default;
  outline: none;

  --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
  --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
}

.spectrum-FieldButton {
  margin: 0;
  padding-block: 0;
  padding-inline: var(--spectrum-dropdown-padding-x);

  --spectrum-button-border-width: var(--spectrum-dropdown-border-size);
  --spectrum-button-border-radius: var(--spectrum-border-radius);
  border-style: solid;

  transition: background-color var(--spectrum-global-animation-duration-100),
    box-shadow var(--spectrum-global-animation-duration-100),
    border-color var(--spectrum-global-animation-duration-100);

  &:disabled,
  &.is-disabled {
    border-width: var(--spectrum-fieldbutton-disabled-border-size);
    cursor: default;
  }

  &.is-open {
    border-width: var(--spectrum-dropdown-border-size);
  }
}

.spectrum-FieldButton--quiet {
  composes: spectrum-FocusRing--quiet;

  margin: var(--spectrum-fieldbutton-quiet-margin);
  padding: var(--spectrum-fieldbutton-quiet-padding);

  --spectrum-button-border-width: var(--spectrum-fieldbutton-quiet-border-size);
  --spectrum-button-border-radius: var(--spectrum-fieldbutton-quiet-border-radius);
  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
  &:disabled,
  &.is-disabled {
    &:focus-visible {
      box-shadow: none;
    }
  }
}

.spectrum-ClearButton {
  composes: spectrum-BaseButton spectrum-FocusRing;

  inline-size: var(--spectrum-clearbutton-medium-width);
  block-size: var(--spectrum-clearbutton-medium-height);

  --spectrum-button-border-radius: 100%;
  --spectrum-button-border-width: 0px;

  padding: 0;
  margin: 0;

  border: none;

  > .spectrum-Icon {
    /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */
    margin-block: 0;
    margin-inline: auto;
  }

  &.spectrum-ClearButton--inset.spectrum-ClearButton--inset {
    transition: unset;
    box-sizing: border-box;
    &:after {
      transition: unset;
      height: calc(100% - 2px);
      aspect-ratio: 1;
      top: 50%;
      left: 50%;
      right: unset;
      bottom: unset;
      margin: 0;
      transform: translate(-50%, -50%);
    }

    &:focus-visible {
      &:after {
        box-shadow: inset 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
      }
    }
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .spectrum-ClearButton {
    > .spectrum-Icon {
      /* @ie11 Workaround for regression caused by fix for https://bugs.webkit.org/show_bug.cgi?id=169700 */
      margin: 0;
    }
  }
}

.spectrum-ClearButton--small {
  inline-size: var(--spectrum-clearbutton-small-width);
  block-size: var(--spectrum-clearbutton-small-height);
}
